<template>
  <a-form :model="datas" class="standard_form" :rules="rules" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="中文名称" name="dcChName">
      <a-input v-model:value="datas.dcChName" placeholder="请输入标准中文名称" />
    </a-form-item>
    <a-form-item label="英文名称" name="dcEnName">
      <a-input v-model:value="datas.dcEnName" placeholder="请输入标准英文名称" />
    </a-form-item>
    <a-form-item label="标准说明" name="dcExplain">
      <a-textarea v-model:value="datas.dcExplain" show-count :maxlength="200" />
    </a-form-item>
    <a-form-item label="来源机构" name="dcSourceStructure">
      <a-select v-model:value="datas.dcSourceStructure" allow-clear :options="dcSourceStructure"></a-select>
    </a-form-item>
    <a-form-item label="是否可为空" name="dcDataNull">
      <a-select v-model:value="datas.dcDataNull" allow-clear placeholder="请选择" :options="dcDataNull"></a-select>
    </a-form-item>
    <a-form-item label="数据类型" name="dcDataType">
      <a-select v-model:value="datas.dcDataType" allow-clear :options="dcDataType"></a-select>
    </a-form-item>
    <template v-if="datas.dcDataType == dataType.Int">
      <a-form-item label="取值范围" name="datarange">
        <a-input-number v-model:value="datas.dcMinValue" placeholder="请输入最小值" :maxlength="20" style="width: 40%" />---
        <a-input-number v-model:value="datas.dcMaxValue" placeholder="请输入最大值" :maxlength="20" style="width: 40%" />
      </a-form-item>
      <a-form-item label="默认值" name="dcValue">
        <a-input v-model:value="datas.dcValue" placeholder="请输入标准数据默认值" />
      </a-form-item>
    </template>
    <template v-else-if="datas.dcDataType == dataType.Float">
      <a-form-item label="数据精度" name="dcDataPrecision">
        <a-input v-model:value="datas.dcDataPrecision" placeholder="请输入标准数据保留小数位数" :maxlength="1" />
      </a-form-item>
      <a-form-item label="取值范围" name="datarange">
        <a-input-number v-model:value="datas.dcMinValue" placeholder="请输入标准数据最小值" :maxlength="20" style="width: 40%" />---
        <a-input-number v-model:value="datas.dcMaxValue" placeholder="请输入标准数据最大值" :maxlength="20" style="width: 40%" />
      </a-form-item>
      <a-form-item label="默认值" name="dcValue">
        <a-input v-model:value="datas.dcValue" placeholder="请输入标准数据默认值" />
      </a-form-item>
    </template>
    <template v-else-if="datas.dcDataType == dataType.Enum">
      <a-form-item label="枚举范围" name="stopwatchName">
        <a-select v-model:value="datas.stopwatchName" allow-clear :options="stopwatchName"></a-select>
      </a-form-item>
      <a-form-item label="默认值" name="dcValue">
        <a-input v-model:value="datas.dcValue" placeholder="请输入标准数据默认值" />
      </a-form-item>
    </template>
    <template v-else-if="datas.dcDataType == dataType.String">
      <a-form-item label="数据长度" name="dcDataLength">
        <a-input v-model:value="datas.dcDataLength" placeholder="请输入标准数据最大长度" :maxlength="10" />
      </a-form-item>
      <a-form-item label="默认值" name="dcValue">
        <a-input v-model:value="datas.dcValue" placeholder="请输入标准数据默认值" />
      </a-form-item>
    </template>
    <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
      <a-button style="margin-right: 20px" @click="cancel">取消</a-button>
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { getStanardListHooks } from '@/hooks/CatalogDataStandardsHooks/getDataStandarsHooks';
  import { getDataCriterionDetailHooks } from '@/hooks/CatalogDataStandardsHooks/getDataCriterionDetailHooks';
  import { dataType, isDataNull } from '@/enums/statusEnum';
  const { stanards, table, getData } = getStanardListHooks();
  const { datas, addNewDataCriterion, updateData } = getDataCriterionDetailHooks();
  //取消关闭抽屉
  const cancel = (e: MouseEvent) => {
    console.log(e);
    stanards.drawer = false;
  };
  const dcSourceStructure = [{ label: '数宜信', value: '数宜信' }];
  const dcDataNull = [
    { label: '不可为空', value: isDataNull.数据不可为空 },
    { label: '可为空', value: isDataNull.数据可为空 },
  ];
  const dcDataType: { label?: string; value?: number | string }[] = [{ label: '', value: '' }];
  for (const key in dataType) {
    const temp: { label?: string; value?: number | string } = {};
    if (Object.prototype.hasOwnProperty.call(dataType, key)) {
      if (typeof dataType[key] == 'number' && key != 'Array' && key != 'Object') {
        temp.label = key;
        temp.value = dataType[key];
        dcDataType.push(temp);
      }
    }
  }
  const stopwatchName = [
    { label: '码表1', value: '码表1' },
    { label: '码表2', value: '码表2' },
  ];

  const rules = {
    //中文名称
    dcChName: [
      {
        required: true,
        message: '中文名称不能为空！',
      },
      {
        pattern: /^[\u4E00-\u9FA5]{2,30}$/,
        message: '请输入标准中文名称',
        validateTrigger: 'onBlur',
      },
    ],
    //英文名称
    dcEnName: [
      {
        required: true,
        message: '英文名称不能为空',
      },
      {
        pattern: '^[a-z][A-Za-z0-9-_]\{2,30}$',
        message: '3-30个字符以内英文大小写、数字及下划线且只能英文开头',
        validateTrigger: 'onBlur',
      },
    ],
    //来源机构
    dcSourceStructure: [
      {
        required: true,
        message: '请选择！',
      },
    ],
    //是否为空
    dcDataNull: [
      {
        required: true,
        message: '请选择！',
      },
    ],
    //数据类型
    dcDataType: [
      {
        required: true,
        message: '请选择！',
      },
    ],
    //数据长度
    dcDataLength: [
      {
        pattern: /^[0-9]+$/,
        message: '请输入正整数',
      },
    ],
    //数据精度长度
    dcDataPrecision: [
      {
        pattern: /^[0-9]+$/,
        message: '请输入正整数',
      },
    ],
    //取值范围
    datarange: [
      {
        pattern: /^[0-9]+$/,
        message: '请输入正整数',
      },
    ],
    //枚举范围
    stopwatchName: [
      {
        required: true,
        message: '请选择！',
      },
    ],
  };
  const onFinish = async () => {
    console.log('Success:', datas);
    if (datas.value.status == '新增') {
      await addNewDataCriterion();
      stanards.drawer = false;
      table.num = 1;
      getData();
    } else if (datas.value.status == '编辑') {
      await updateData();
      stanards.drawer = false;
      table.num = 1;
      getData();
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
</script>

<style lang="less" scoped>
  .standard_title {
    font-size: 20px;
    text-align: center;
  }

  .standard_form {
    padding-top: 5%;
    // border: 1px solid black;
    padding-right: 10%;
  }

  .btn {
    .ant-space {
      display: flex;
      justify-content: space-evenly;
    }
  }
</style>
